<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    ul{
        padding: 20px;
        background: rgba(234, 147, 148, 0.5)
    }
    
</style>
<body>
    <div id="app">  
        <p>num: {{num}}</p>
        <p><button v-on:click="++num">点击num</button></p>
        <p><button v-on:dblclick="++num">双击num</button></p>
        <ul @click="clickUl">
            <li @click.once="clickLi">111111</li>
        </ul>
        <form @submit.prevent="submits">
            <input type="text" name="username">
            <button type="submit">提交</button>
        </form>
        <p>
            <button @contextmenu.prevent="contextmenu">右键点我。</button>
        </p>

        <p>
            <input type="text" @keyUp.f2="up">
        </p>
    </div>
    <script src="./base/vue.min.js"></script>
    <script>
        //v-on指令来去绑定事件   v-on:click ===>  @click
        //v-on可以简写为@

        //@click.stop      阻止事件冒泡===> e.stopPropagation()
        //@click.prevent   取消事件默认行为 ==> e.preventDefault()
        //@click.once      只会触发一次
        //@click.self      只会自身触发

        Vue.config.keyCodes.f2 = 113  //定义键盘码标识  按键盘的113号键盘码就可以触发up方法了！
        new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{//方法的配置
                up(e){
                    //if(e.keyCode===13){
                        console.log(e.target.value)
                    //}
                },
                clickLi:function(e){
                    console.log("li被点击了哦......")
                    //阻止事件冒泡  
                    //e.stopPropagation();    w3c标准
                    //e.cancelBubble = true;  非w3c标准
                },
                clickUl(){
                    console.log("ul被点击了哦......")
                },
                submits(e){
                    //取消事件默认行为
                    // e.preventDefault()
                    console.log("submit....")
                },
                contextmenu(){
                    console.log("contextmenu...")
                }
            }
        })
    </script>
</body>
</html>